<template>
	<uni-popup ref="popup" type="bottom">
		<view class='bg-white rounded-popup overflow-hidden'>
			<PickerTitle :hideBtn='true' :title="title"/>
			<scroll-view :scroll-y='true' :style="{height: innerHeight + 'px'}">
				<template v-if="data && data.length > 0">
					<c-list-item v-for="el in data" :title="el.text" :key="el.value" @touch="select(el)"/>
				</template>
				<c-empty v-else />
			</scroll-view>
		</view>
	</uni-popup>
</template>

<script>
import { ref, watch, nextTick } from 'vue';
import PickerTitle from "../item-picker/picker-title.vue";
export default {
	components: {
		PickerTitle
	},
	props: {
		data: Array,
		title: String,
		//rpx
		contentHeight: {
			type: Number,
			default: 600
		},
	},
	emits: ["select"],
	setup(props, ctx) {
		const popup = ref();
		//索引
		function open(options = {}){
			popup.value.open();
		}
		function close(){
			popup.value.close();
		}
		const innerHeight = ref(uni.upx2px(props.contentHeight));
		function select(el){
			ctx.emit("select", {
				value: el.value,
				item: el
			});
			close();
		}
		return {
			open,
			close,
			innerHeight,
			select,
			popup,
		};
	},
};
</script>

<style></style>
